<template>
	<view class="videoShoppingDetail">
		<video id="shopping_video" @click="isPlay ? pause() : play()" :vslide-gesture="true"
			:show-center-play-btn="false" :controls="false"
			:src="oss(data.file)">
			<!-- 返回 -->
			<!-- 暂停按钮 -->
			<cover-image v-if="!isPlay" @click.stop="play()" class="pause_button" src="../../static/videoShoppingDetail/btn.png" mode=""></cover-image>
			<!-- 拨打电话 -->
			<cover-view class="mobile">
				<cover-image class="icon"  @click="showInfo" src="../../static/mobile.png"></cover-image>
				<cover-view  @click="showInfo">拨打电话</cover-view>
			</cover-view>
			<!-- 信息 -->
			<cover-view class="info">
				<cover-view class="title ellipsis">{{data.name}}</cover-view>
				<cover-view class="other flex f-x-b">
					<cover-view class="time">{{data.showtime | date}}</cover-view>
					<cover-view class="num">{{data.look}}播放量</cover-view>
				</cover-view>
			</cover-view>
			<!-- 联系方式弹窗 -->
			<cover-view class="contact_way_box absolute" v-if="contactWayBoxShow" @click.stop="">
				<cover-view class="contact_way">
					<cover-view class="title">联系方式</cover-view>
					<cover-view class="content">{{data.mobile}}</cover-view>
					<cover-view class="btns flex">
						<cover-view class="cancel btn" @click="contactWayBoxShow = false">取消</cover-view>
						<cover-view class="confirm btn" @click="tel">拨打</cover-view>
					</cover-view>
				</cover-view>
				
			</cover-view>
		</video>
		
		<view class="share-box">
			<button class="iconfont icon-yaoqing" style="width: 110rpx;height: 110rpx;z-index: 99;" open-type="share"></button>
			<image class="fenx-img" src="../../static/fenx.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 视频实例
				videoContext: null,
				// 是否正在播放
				isPlay: false,
				// 联系方式框是否显示
				contactWayBoxShow: false,
				data: ''
			}
		},
		methods: {
			showInfo(){
				if(!uni.getStorageSync('token')){
					uni.$u.route({
						url: 'pagesA/auth/login'
					})
					return
				}
				if(this.data.mobile){
					this.contactWayBoxShow = true
				} else {
					this.toast('该视频的物品或者信息已经处理，无法联系卖家的')
				}
				
			},
			// 播放
			play() {
				console.log(111111111)
				this.videoContext.play();
				this.isPlay = true;
			},
			// 暂停
			pause() {
				console.log(22222)
				this.videoContext.pause();
				this.isPlay = false;
			},
			// 返回
			back() {
				let pages = getCurrentPages();
				if(pages.length>1){
					uni.navigateBack();
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
			},
			tel(){
				//#ifdef MP-WEIXIN
				uni.$u.http.post('/mobilelog',{
					mobile:this.data.mobile
				}).then(res => {
					if (res.code == 1) {
						uni.makePhoneCall({
							phoneNumber: this.data.mobile
						});
					}
				}).catch((res) => {
				
				})
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(this.data.mobile, true);
				//#endif
			},
			getInfo(){
				uni.$u.http.post('/videoinfo', {
					id: this.id,
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data
						uni.setNavigationBarTitle({
						  title:this.data.name
						});
					}
				}).catch((res) => {
							
				})
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getInfo()
		},
		onReady() {
			this.videoContext = uni.createVideoContext('shopping_video');
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #000;
	}
	.videoShoppingDetail {
		background-color: #000;

		video {
			width: 100vw;
			height: 95vh;
			// padding-top: 5vh;
			// margin-top: 15vh;
		}
		
		.back {
			position: absolute;
			// top: calc(50rpx + constant(safe-area-inset-top));
			top: calc(90rpx + env(safe-area-inset-top));
			left: 32rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.pause_button {
			width: 128rpx;
			height: 128rpx;
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%);
		}

		.mobile {
			position: absolute;
			right: 32rpx;
			bottom: 430rpx;
			text-align: center;
			padding: 20rpx;
			// background: red;

			.icon {
				width: 82rpx;
				height: 70rpx;
				margin: 0 auto 10rpx;
			}

			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.info {
			position: absolute;
			bottom: 120rpx;
			padding: 0 32rpx;

			.title {
				width: 686rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin-bottom: 27rpx;
			}

			.other {
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.contact_way_box {
			z-index: 3;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0);
			
			.contact_way {
				position: absolute;
				width: 476rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding-top: 40rpx;
				text-align: center;
				top: 40%;
				left: 50%;
				transform: translate(-50%);
			}

			.title {
				font-size: 32rpx;
				font-weight: 400;
				color: #3D3D3D;
			}

			.content {
				font-size: 40rpx;
				font-weight: 600;
				color: #3D3D3D;
				margin: 80rpx 0;
			}

			.btns {
				.btn {
					font-size: 28rpx;
					font-weight: 600;
					line-height: 104rpx;
					width: 50%;

					&.cancel {
						color: #676767;
					}

					&.confirm {
						color: #FEBF4E;
						position: relative;

						&::before {
							content: '';
							display: block;
							width: 1rpx;
							height: 45rpx;
							position: absolute;
							background: #D8D8D8;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}
		}
	}
	
	
	.share-box {
				position: fixed;
				bottom: 42%;
				right: 29rpx;
				z-index: 9;
				
				.fenx-img {
					width: 100rpx;
					height: 100rpx;
					position: relative;
					top: -100rpx;
				}
			}
			/* button自带样式清除 */
			.share-box button::after {
			  border: none !important;
			  padding: 0 !important;
			  margin: 0 !important;
			}
			
			.share-box button {
			  background-color: transparent !important;
			  padding: 0 !important;
			  line-height: inherit !important;
			  margin: 0 !important;
			  width: auto !important;
			  font-weight: 500 !important;
			  border-radius: none !important;
			}
</style>
